<template>
  <div class="point-group-container" style=" margin:15px 50px;">
    <vue-element-loading :active="this.$store.state.vueElementLoading" :is-full-screen="true" spinner="bar-fade-scale" color="#409EFF" background-color="rgba(0, 0, 0, 0.8)" text="拼命加载中"  />
   <!-- <el-page-header @back="goBack" >
  </el-page-header>-->
    <span class="pan-btn blue-btn" @click="goBack">返回</span>
    <!--<div class="ts-right">

      <div class="right-menu-item" @mouseover="digitalChange=true" @mouseleave="digitalChange=false">
        <div
          class="tsk digital-color"></div>
      </div>
      <div class="right-menu-item">
        <div>数字量</div>
      </div>
      <div class="right-menu-item" @mouseover="analogChange=true" @mouseleave="analogChange=false">
        <div class="tsk analog-color"></div>
      </div>
      <div class="right-menu-item">
        <div>模拟量</div>
      </div>
      <div class="right-menu-item-data">
        <div>{{pointtime}}</div>
      </div>
    </div>-->

    <!--<el-row :gutter="5" style="padding: 0px">
      <el-col :xs="24" :sm="24" :lg="12" v-for="plcData in pointArr" :key="plcData.point_id">

        <div v-if="plcData.point_type===1" class="plc-data-panel digital-panel" :class="{backg:digitalChange}"
             @click="pointCliceHandler(plcData.device_id,plcData.index,plcData.point_name,plcData.point_id,plcData.point_type)">
          <div class="breath" :class="{redLight:plcData.value==='0'}" title="呼吸灯"></div>
          <span class="dddd">{{plcData.point_name}}</span>
        </div>

        <div v-else class="plc-data-panel analog-panel" :class="{backg:analogChange}"
             @click="pointCliceHandler(plcData.device_id,plcData.index,plcData.point_name,plcData.point_id,plcData.point_type)">
          <div
            style="float: right;overflow: hidden;position: relative;">{{plcData.value}}
          </div>
          <span class="dddd">{{plcData.point_name}}</span>
        </div>
      </el-col>
    </el-row>-->
    <flow-sheet v-if="classType===1" :pointsArr="pointName"></flow-sheet>
    <flow-sheet-yq v-if="classType===2" :pointsArr="pointName"></flow-sheet-yq>
  <!--  <div v-if="pointArr.length==0" style="margin:50px 0 50px 0">
      <center>暂无数据</center>
    </div>-->
    <!--弹出框值-->
   <!-- <el-dialog :title="title" :visible.sync="visible" height="70%" width="85%" :close-on-click-modal=false
               @close="diglogClose">
      <digital-view v-if="this.diglogType===1" ref="child_digital_view"/>
      <analog-view v-else-if="this.diglogType===2" ref="child_analog_view"/>
      <div v-else></div>
    </el-dialog>-->

    <!--    <digital-view ref="child_digital_view"/>
        <analog-view ref="child_analog_view"/>-->
  </div>
</template>

<script>
  import {mapGetters} from 'vuex';
  import socketio from 'socket.io-client';
  import _ from 'underscore';
  import PointView from '@/components/PointView'
  import DigitalView from '@/components/DigitalView'
  import FlowSheet from '@/components/Flowsheet'
  import FlowSheetYq from '@/components/FlowSheetYq'
  import AnalogView from '@/components/AnalogView'
  import {getUserInfo} from "../../utils/auth";
  import config from '../../../config';
  import VueElementLoading from 'vue-element-loading';
  export default {
    name: "pointDetail",
    components: {PointView, DigitalView, AnalogView,VueElementLoading,FlowSheet,FlowSheetYq},
    mounted() {
      console.log(config.dev.proxyTable['/api'].target);
    },
    computed: {
      ...mapGetters(['plcId'])
    },
    created(){
      this.classType=this.$route.params.classType;
    },
    //
    watch: {
      plcId(device_id) {
        let comp = this;
        if (this.socket) this.socket.destroy();//如果socket存在 销毁socket
        //重新创建socket
        this.socket = socketio(config.dev.proxyTable['/api'].target);
        this.socket.emit('detailPointView', {device_id: comp.$route.params.device_id,user_id:getUserInfo().user_id,classType:comp.$route.params.classType}, function (a, b) {
        });
        //添加侦听器
        this.socket.on('detailPointView', function (data, b) {
          //传入数据
          comp.pointArr = data.data;
          comp.pointName=data.dataObj;
          comp.pointtime=data.time;
          let vm=comp.$store;
          vm.commit('updateLoading',false);
        /*  /!*  _.where的意思是从一堆数组中找到所匹配的时间
            _.where(listOfPlays, {author: "Shakespeare", year: 1611});
          => [{title: "Cymbeline", author: "Shakespeare", year: 1611},
              {title: "The Tempest", author: "Shakespeare", year: 1611}]*!/
          let temperatureData = _.where(data.data, {point_sign: 1}).shift();
          let openData = _.where(data.data, {point_sign: 2}).shift();
          let plcDataObj = {dataTime: data.time};
          if (temperatureData) plcDataObj.td = temperatureData.value;
          if (openData) plcDataObj.od = openData.value;
          //数据全局化
          comp.$store.dispatch('plc/setPlcRealTimeData', plcDataObj);*/
        });
      },
      diglogType(type) {

      }

    },

    data() {
      return {
        pointArr: [],
        pointName:[],
        pointtime:'',
        socket: null,
        visible: false,
        title: '',
        diglogType: null,
        sendPointId: null,
        digitalChange: false,
        analogChange: false,
        classType:0
      }
    },
    beforeDestroy() {
/*
      this.$store.dispatch('plc/setPlcId', null);//调取方法
*/
      if (this.socket) this.socket.destroy();//销毁socket
      console.log('destroy');
    },
    methods: {
      pointCliceHandler(device_id,index, point_name, point_id,point_type) {
        this.diglogType = point_type;
        let bb = '';
        if (point_type === 1) {
          bb = 'child_digital_view';
        } else if (point_type === 2) {
          bb = 'child_analog_view';
        } else {
          return;
        }

        this.visible = true;
        this.title = `${point_name}点位状态`;

        let p = this;
        setTimeout(function () {
          if(bb=="child_digital_view"){
            p.$refs[bb].initView(device_id,index,point_id,);
            p.$refs[bb].initViewA(device_id,index,point_id,);
          }else{
            p.$refs[bb].initView(device_id,index,point_id,);
          }

        }, 300);
      },
      diglogClose() {
        this.diglogType = 0;
      },
      goBack() {
        this.$store.dispatch('plc/setPlcIdSelIndex', this.$route.params.sel_index);
        /*this.$router.go(-1);*/
        this.$router.push({name: 'index'});//push是跳转页面 params传值过去

      },
    }
  }
</script>
<style>
  .point-group-container{

  }
  .backg {
    background-color: #4c4b55;

  }
  .breath {
    float: right;
    text-indent: -999em;
    height: 20px;
    width: 20px;
    overflow: hidden;
    position: relative;
    background: #b0ff3b;
    color: #00ff51;
    opacity: 0.1;
    -webkit-box-shadow: 0 0 5px #b0ff3b;
    -moz-box-shadow: 0 0 5px #b0ff3b;
    -ms-box-shadow: 0 0 5px #b0ff3b;
    -o-box-shadow: 0 0 5px #b0ff3b;
    box-shadow: 0 0 5px #b0ff3b;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 90px;

    -webkit-animation-name: breath;
    -webkit-animation-duration: 3s; /*人的普通呼吸时间是3秒每次，深呼吸时间是6秒每次*/
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
  }

  @-webkit-keyframes 'breath' {
    from {
      opacity: 0.3;

    }
    50% {
      opacity: 1;

    }
    to {
      opacity: 0.3;

    }
  }

  .redLight {
    background: #ff5260;
    color: #ff8e87;
    opacity: 0.1;
    -webkit-box-shadow: 0 0 5px #ff5260;
    -moz-box-shadow: 0 0 5px #ff5260;
    -ms-box-shadow: 0 0 5px #ff5260;
    -o-box-shadow: 0 0 5px #ff5260;
    box-shadow: 0 0 5px #ff5260;
  }
  .el-dialog__header{
    background: #32363c;

  }
  .el-dialog__title {
    line-height: 24px;
    font-size: 18px;
    color: #ffffff;
  }
</style>
<style lang="scss" scoped>

</style>


